<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vant-CLI使用文档 |   👉Aresnine 👈</title>
    <meta name="description" content="Aresnine的个人博客,web,vue,组件库,js">
    <link rel="preload stylesheet" href="/assets/style.427ea497.css" as="style">
    <link rel="modulepreload" href="/assets/app.db42a1fc.js">
    <link rel="modulepreload" href="/assets/technology_vantcli_index.md.e26eafd5.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-236bb526><!--[--><!--]--><!--[--><span tabindex="-1" data-v-14c16caa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-14c16caa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-236bb526 data-v-de4e1621><div class="VPNavBar" data-v-de4e1621 data-v-52cf45e4><div class="container" data-v-52cf45e4><div class="title" data-v-52cf45e4><div class="VPNavBarTitle" data-v-52cf45e4 data-v-a8248850><a class="title" href="/" data-v-a8248850><!--[--><!--]--><!----><!--[-->  👉Aresnine 👈<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-52cf45e4><div class="curtain" data-v-52cf45e4></div><div class="content-body" data-v-52cf45e4><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-52cf45e4 data-v-97cd7ece><span id="main-nav-aria-label" class="visually-hidden" data-v-97cd7ece>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/面试题/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->面试题<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vitePress<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/www/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->网站搭建<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue3/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vue🐴<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/每日任务/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->每日任务<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/技术总结/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->技术总结<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-97cd7ece data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6d0cfa0d><span class="text" data-v-6d0cfa0d><!----> technology <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6d0cfa0d><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><div class="items" data-v-24d333ba><!--[--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/待整理/" data-v-78f06588 data-v-a6710068><!--[-->待整理<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/typescript/" data-v-78f06588 data-v-a6710068><!--[-->typescript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/blog/" data-v-78f06588 data-v-a6710068><!--[-->博客搭建<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link active" href="/technology/vantcli/" data-v-78f06588 data-v-a6710068><!--[-->vantcli文档<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/components/index.html" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->组件库<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-52cf45e4 data-v-3c0f7ebf><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-3c0f7ebf data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-52cf45e4 data-v-eaa5cb3f data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6d0cfa0d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6d0cfa0d><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><!----><!--[--><!--[--><!----><div class="group" data-v-eaa5cb3f><div class="item appearance" data-v-eaa5cb3f><p class="label" data-v-eaa5cb3f>Appearance</p><div class="appearance-action" data-v-eaa5cb3f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-eaa5cb3f data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-52cf45e4 data-v-f4211e0b><span class="container" data-v-f4211e0b><span class="top" data-v-f4211e0b></span><span class="middle" data-v-f4211e0b></span><span class="bottom" data-v-f4211e0b></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-236bb526 data-v-bb109c21><div class="VPDoc has-aside" data-v-bb109c21 data-v-9710e0b3><div class="container" data-v-9710e0b3><div class="aside" data-v-9710e0b3><div class="aside-curtain" data-v-9710e0b3></div><div class="aside-container" data-v-9710e0b3><div class="aside-content" data-v-9710e0b3><div class="VPDocAside" data-v-9710e0b3 data-v-b312be0a><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-b312be0a data-v-69920f5a><div class="content" data-v-69920f5a><div class="outline-marker" data-v-69920f5a></div><div class="outline-title" data-v-69920f5a>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-69920f5a><span class="visually-hidden" id="doc-outline-aria-label" data-v-69920f5a> Table of Contents for current page </span><ul class="root" data-v-69920f5a data-v-5343b0c6><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-b312be0a></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9710e0b3><div class="content-container" data-v-9710e0b3><!--[--><!--]--><main class="main" data-v-9710e0b3><div style="position:relative;" class="vp-doc _technology_vantcli_index" data-v-9710e0b3><div><h1 id="vant-cli使用文档" tabindex="-1">Vant-CLI使用文档 <a class="header-anchor" href="#vant-cli使用文档" aria-hidden="true">#</a></h1><h2 id="命令" tabindex="-1">命令 <a class="header-anchor" href="#命令" aria-hidden="true">#</a></h2><p>Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// package.json</span></span>
<span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">scripts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">dev</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vant-cli dev</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vant-cli test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">lint</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vant-cli lint</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">release</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vant-cli release</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">build-site</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vant-cli build-site</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>也可以通过 npm 自带的 <a href="https://github.com/npm/npx" target="_blank" rel="noreferrer">npx</a> 直接执行某个命令：</p><div class="language-powershell"><button title="Copy Code" class="copy"></button><span class="lang">powershell</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#BABED8;">npx vant</span><span style="color:#89DDFF;">-</span><span style="color:#BABED8;">cli dev</span></span>
<span class="line"></span></code></pre></div><h3 id="dev" tabindex="-1">dev <a class="header-anchor" href="#dev" aria-hidden="true">#</a></h3><p>运行本地开发环境。</p><p>运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。</p><h3 id="build" tabindex="-1">build <a class="header-anchor" href="#build" aria-hidden="true">#</a></h3><p>构建组件库。</p><p>运行 build 命令会在 <code>es</code> 和 <code>lib</code> 目录下生成可用于生产环境的组件代码，详见 <a href="https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md" target="_blank" rel="noreferrer">目录结构</a>。</p><p>发布 npm 时，请将以下配置加入到 <code>package.json</code> 中，使 npm 包能被正确识别:</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// package.json</span></span>
<span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">main</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lib/index.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">module</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">es/index.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">files</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">es</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lib</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="build-site" tabindex="-1">build-site <a class="header-anchor" href="#build-site" aria-hidden="true">#</a></h3><p>构建文档站点，在 <code>site</code> 目录生成可用于生产环境的文档站点代码。</p><h3 id="release" tabindex="-1">release <a class="header-anchor" href="#release" aria-hidden="true">#</a></h3><p>发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 <a href="https://github.com/release-it/release-it" target="_blank" rel="noreferrer">release-it</a> 发布 npm 包。</p><h3 id="changelog" tabindex="-1">changelog <a class="header-anchor" href="#changelog" aria-hidden="true">#</a></h3><p>基于 commit 记录生成更新日志，基于 <a href="https://github.com/conventional-changelog/conventional-changelog" target="_blank" rel="noreferrer">conventional-changelog</a> 实现。</p><h3 id="commit-lint" tabindex="-1">commit-lint <a class="header-anchor" href="#commit-lint" aria-hidden="true">#</a></h3><p>校验 commit message 的格式是否符合规范，需要配合 <code>husky</code> 在提交 commit 时触发。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">npx husky add .husky/commit-msg &#39;npx --no-install vant-cli commit-lint $1&#39;</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="配置指南" tabindex="-1">配置指南 <a class="header-anchor" href="#配置指南" aria-hidden="true">#</a></h2><h3 id="vant-config-mjs" tabindex="-1">vant.config.mjs <a class="header-anchor" href="#vant-config-mjs" aria-hidden="true">#</a></h3><p><code>vant.config.mjs</code> 中包含了 <code>vant-cli</code> 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 组件库名称</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">demo-ui</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 构建配置</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/demo-ui/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 文档站点配置</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 标题</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Demo UI</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 图标</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">logo</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://fastly.jsdelivr.net/npm/@vant/assets/logo.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 描述</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">description</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">示例组件库</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 左侧导航</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">nav</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">开发指南</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">items</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">home</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">介绍</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">        ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">基础组件</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">items</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">my-button</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">MyButton 按钮</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">        ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">    ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="name" tabindex="-1">name <a class="header-anchor" href="#name" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>组件库名称，建议使用中划线分割，如 <code>demo-ui</code>。</p><h2 id="build-1" tabindex="-1">build <a class="header-anchor" href="#build-1" aria-hidden="true">#</a></h2><h4 id="build-css-base" tabindex="-1">build.css.base <a class="header-anchor" href="#build-css-base" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;style/base.less&#39;</code></li></ul><p>全局样式文件的路径，可以为相对路径或绝对路径。</p><p>相对路径基于 <code>src</code> 目录计算。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">css</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">base</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">style/global.scss</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="build-css-preprocessor" tabindex="-1">build.css.preprocessor <a class="header-anchor" href="#build-css-preprocessor" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;less&#39;</code></li></ul><p>CSS 预处理器配置，目前支持 <code>less</code> 和 <code>sass</code> 两种预处理器，默认使用 <code>less</code>。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">css</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">preprocessor</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">sass</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="build-css-removesourcefile" tabindex="-1">build.css.removeSourceFile <a class="header-anchor" href="#build-css-removesourcefile" aria-hidden="true">#</a></h4><ul><li>Type: <code>boolean</code></li><li>Default: <code>&#39;false&#39;</code></li></ul><p>是否在构建后移除样式文件的源代码。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">css</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">removeSourceFile</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="build-site-publicpath" tabindex="-1">build.site.publicPath <a class="header-anchor" href="#build-site-publicpath" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>/</code></li></ul><p>等价于 vite 的 <code>build.outDir</code> 配置。</p><p>一般来说，我们的文档网站会部署在一个域名的子路径上，如 <code>https://my.github.io/demo-ui/</code>，这时候 <code>publicPath</code> 需要跟子路径保持一致，即 <code>/demo-ui/</code>。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/demo-ui/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="build-srcdir" tabindex="-1">build.srcDir <a class="header-anchor" href="#build-srcdir" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>src</code></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">srcDir</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myDir</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="build-namedexport" tabindex="-1">build.namedExport <a class="header-anchor" href="#build-namedexport" aria-hidden="true">#</a></h4><ul><li>Type: <code>boolean</code></li><li>Default: <code>false</code></li></ul><p>是否通过 Named Export 对组件进行导出。</p><p>未开启此选项时，会通过 <code>export default from &#39;xxx&#39;</code> 导出组件内部的默认模块。</p><p>开启此选项后，会通过 <code>export * from &#39;xxx&#39;</code> 导出组件内部的所有模块、类型定义。</p><h4 id="build-configurevite" tabindex="-1">build.configureVite <a class="header-anchor" href="#build-configurevite" aria-hidden="true">#</a></h4><ul><li>Type: <code>(config: InlineConfig): InlineConfig | undefined</code></li><li>Default: <code>undefined</code></li></ul><p>vant-cli 使用 vite 来构建组件库和文档站点，通过 <code>configureVite</code> 选项可以自定义 <a href="https://vitejs.dev/config/" target="_blank" rel="noreferrer">vite 配置</a>（从 4.0.0 版本开始支持）。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">configureVite</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">config</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#BABED8;">config</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">server</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">port</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">config</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><p>在自定义配置时，可以通过 <code>p<wbr>rocess.env.BUILD_TARGET</code> 对构建目标进行区分：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">configureVite</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">config</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">BUILD_TARGET</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">BUILD_TARGET</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">package</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 修改组件库构建配置</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">BUILD_TARGET</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">site</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 修改文档站点构建配置</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">config</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><p>注意，由于 <code>vant.config.mjs</code> 文件会被打包到文档网站的代码中，因此 <code>configureVite</code> 中不允许引用 vite 插件。</p><p>如果需要配置 vite 插件，可以在 <code>vant.config.mjs</code> 的同级目录下创建 <code>vite.config.ts</code> 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。</p><h4 id="build-packagemanager" tabindex="-1">build.packageManager <a class="header-anchor" href="#build-packagemanager" aria-hidden="true">#</a></h4><ul><li>Type: <code>&#39;npm&#39; | &#39;yarn&#39; | &#39;pnpm&#39;</code></li><li>Default: <code>undefined</code></li></ul><p>指定使用的包管理器。</p><h4 id="build-bundleoptions" tabindex="-1">build.bundleOptions <a class="header-anchor" href="#build-bundleoptions" aria-hidden="true">#</a></h4><ul><li>Type: <code>BundleOptions[]</code></li></ul><p>指定打包后产物的格式。</p><p>产物格式由三个配置项控制：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">BundleOption</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 是否压缩代码（注意 es 产物无法被 vite 压缩）</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">minify</span><span style="color:#89DDFF;">?:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 产物类型，可选值为 &#39;es&#39; | &#39;cjs&#39; | &#39;umd&#39; | &#39;iife&#39;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">formats</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">LibraryFormats</span><span style="color:#BABED8;">[]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 需要 external 的依赖（Vue 默认会被 external）</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">external</span><span style="color:#89DDFF;">?:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#BABED8;">[]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><p>该选项的默认值为：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> DEFAULT_OPTIONS</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">BundleOption</span><span style="color:#BABED8;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">minify</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">formats</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">umd</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">minify</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">formats</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">umd</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">minify</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">formats</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">es</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">cjs</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">external</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> allDependencies</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h2 id="site" tabindex="-1">site <a class="header-anchor" href="#site" aria-hidden="true">#</a></h2><h4 id="site-title" tabindex="-1">site.title <a class="header-anchor" href="#site-title" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>文档站点的标题。</p><h4 id="site-logo" tabindex="-1">site.logo <a class="header-anchor" href="#site-logo" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>文档站点的 Logo。</p><h4 id="site-description" tabindex="-1">site.description <a class="header-anchor" href="#site-description" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>&#39;&#39;</code></li></ul><p>标题下方的描述文案。</p><h4 id="site-nav" tabindex="-1">site.nav <a class="header-anchor" href="#site-nav" aria-hidden="true">#</a></h4><ul><li>Type: <code>object[]</code></li><li>Default: <code>undefined</code></li></ul><p>文档站点的左侧导航，数组中的每个对象表示一个导航分组。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">nav</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 分组标题</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">开发指南</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 导航项</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">items</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 导航项路由</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">home</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 导航项文案</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">介绍</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 是否隐藏当前页右侧的手机模拟器（默认不隐藏）</span></span>
<span class="line"><span style="color:#BABED8;">            </span><span style="color:#F07178;">hideSimulator</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">          </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">        ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">    ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="site-versions" tabindex="-1">site.versions <a class="header-anchor" href="#site-versions" aria-hidden="true">#</a></h4><ul><li>Type: <code>object[]</code></li><li>Default: <code>undefined</code></li></ul><p>文档站点多版本配置，当组件库存在多个版本的文档时，可以通过<code>site.versions</code>在顶部导航配置一个版本切换按钮。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">versions</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">v1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">link</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://vant-ui.github.io/vant/v1/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">    ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="site-baiduanalytics" tabindex="-1">site.baiduAnalytics <a class="header-anchor" href="#site-baiduanalytics" aria-hidden="true">#</a></h4><ul><li>Type: <code>object</code></li><li>Default: <code>undefined</code></li></ul><p>文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">site</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">baiduAnalytics</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// 打开百度统计 -&gt;『管理』-&gt;『代码获取』</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// 找到下面这串 URL: &quot;https://hm.baidu.com/hm.js?xxxxx&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// 将 `xxxxx` 填写在 seed 中即可</span></span>
<span class="line"><span style="color:#BABED8;">      </span><span style="color:#F07178;">seed</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">xxxxx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="site-hidesimulator" tabindex="-1">site.hideSimulator <a class="header-anchor" href="#site-hidesimulator" aria-hidden="true">#</a></h4><ul><li>Type: <code>boolean</code></li><li>Default: <code>false</code></li></ul><p>是否隐藏所有页面右侧的手机模拟器，默认不隐藏</p><h4 id="site-simulator-url" tabindex="-1">site.simulator.url <a class="header-anchor" href="#site-simulator-url" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: -</li></ul><p>自定义手机模拟器的 iframe URL 地址。</p><h4 id="site-htmlmeta" tabindex="-1">site.htmlMeta <a class="header-anchor" href="#site-htmlmeta" aria-hidden="true">#</a></h4><ul><li>Type: <code>Record</code></li><li>Default: <code>undefined</code></li></ul><p>配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。</p><h4 id="site-headhtml" tabindex="-1">site.headHtml <a class="header-anchor" href="#site-headhtml" aria-hidden="true">#</a></h4><ul><li>Type: <code>string</code></li><li>Default: <code>undefined</code></li></ul><p>在 `` 标签中插入一段自定义的 HTML 内容。</p><h4 id="site-enablevconsole" tabindex="-1">site.enableVConsole <a class="header-anchor" href="#site-enablevconsole" aria-hidden="true">#</a></h4><ul><li>Type: <code>boolean</code></li><li>Default: <code>false</code></li></ul><p>是否在 dev 时开启 <a href="https://github.com/Tencent/vConsole" target="_blank" rel="noreferrer">vConsole</a> 调试，用于移动端 debug。</p><h4 id="postcss" tabindex="-1">PostCSS <a class="header-anchor" href="#postcss" aria-hidden="true">#</a></h4><p>通过根目录下的<code>postcss.config.js</code>文件可以对 PostCSS 进行配置。</p><h5 id="默认配置" tabindex="-1">默认配置 <a class="header-anchor" href="#默认配置" aria-hidden="true">#</a></h5><p><code>vant-cli</code> 中默认的 PostCSS 配置如下：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">autoprefixer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><h4 id="browserslist" tabindex="-1">browserslist <a class="header-anchor" href="#browserslist" aria-hidden="true">#</a></h4><p>推荐在 <code>package.json</code> 文件里添加 browserslist 字段，这个值会被 <code>autoprefixer</code> 用来确定目标浏览器的版本，保证编译后代码的兼容性。</p><p>在移动端浏览器中使用，可以添加如下配置：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">browserslist</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Chrome &gt;= 51</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iOS &gt;= 10</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-hidden="true">#</a></h2><h2 id="源代码目录" tabindex="-1">源代码目录 <a class="header-anchor" href="#源代码目录" aria-hidden="true">#</a></h2><p>基于 Vant CLI 搭建的组件库的基本目录结构如下所示：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">project</span></span>
<span class="line"><span style="color:#babed8;">├─ src                # 组件源代码</span></span>
<span class="line"><span style="color:#babed8;">│   ├─ button        # button 组件源代码</span></span>
<span class="line"><span style="color:#babed8;">│   └─ dialog        # dialog 组件源代码</span></span>
<span class="line"><span style="color:#babed8;">│</span></span>
<span class="line"><span style="color:#babed8;">├─ docs               # 静态文档目录</span></span>
<span class="line"><span style="color:#babed8;">│   ├─ home.md       # 文档首页</span></span>
<span class="line"><span style="color:#babed8;">│   └─ changelog.md  # 更新日志</span></span>
<span class="line"><span style="color:#babed8;">│</span></span>
<span class="line"><span style="color:#babed8;">├─ vant.config.mjs    # Vant CLI 配置文件</span></span>
<span class="line"><span style="color:#babed8;">├─ package.json</span></span>
<span class="line"><span style="color:#babed8;">└─ README.md</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>单个组件的目录如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">button</span></span>
<span class="line"><span style="color:#babed8;">├─ demo             # 示例目录</span></span>
<span class="line"><span style="color:#babed8;">│   └─ index.vue   # 组件示例</span></span>
<span class="line"><span style="color:#babed8;">├─ index.vue        # 组件源码</span></span>
<span class="line"><span style="color:#babed8;">└─ README.md        # 组件文档</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。</p><p>如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">button</span></span>
<span class="line"><span style="color:#babed8;">├─ demo             # 组件示例</span></span>
<span class="line"><span style="color:#babed8;">│   └─ index.vue   # 组件示例入口</span></span>
<span class="line"><span style="color:#babed8;">├─ index.js         # 组件入口</span></span>
<span class="line"><span style="color:#babed8;">├─ index.less       # 组件样式，可以为 less 或 scss</span></span>
<span class="line"><span style="color:#babed8;">└─ README.md        # 组件文档</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。</p><p>通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。</p><h2 id="构建结果目录" tabindex="-1">构建结果目录 <a class="header-anchor" href="#构建结果目录" aria-hidden="true">#</a></h2><p>运行 build 命令会在 <code>es</code> 和 <code>lib</code> 目录下生成可用于生产环境的组件代码，结构如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">project</span></span>
<span class="line"><span style="color:#babed8;">├─ es                   # es 目录下的代码遵循 esmodule 规范</span></span>
<span class="line"><span style="color:#babed8;">│   ├─ button          # button 组件编译后的代码目录</span></span>
<span class="line"><span style="color:#babed8;">│   ├─ dialog          # dialog 组件编译后的代码目录</span></span>
<span class="line"><span style="color:#babed8;">│   └─ index.js        # 引入所有组件的入口 (ESModule)</span></span>
<span class="line"><span style="color:#babed8;">│</span></span>
<span class="line"><span style="color:#babed8;">└─ lib                  # lib 目录下的代码遵循 commonjs 规范</span></span>
<span class="line"><span style="color:#babed8;">    ├─ button           # button 组件编译后的代码目录</span></span>
<span class="line"><span style="color:#babed8;">    ├─ dialog           # dialog 组件编译后的代码目录</span></span>
<span class="line"><span style="color:#babed8;">    ├─ index.js         # 引入所有组件的入口</span></span>
<span class="line"><span style="color:#babed8;">    ├─ index.less       # 所有组件未编译的样式入口</span></span>
<span class="line"><span style="color:#babed8;">    ├─ index.css        # 打包后的组件样式，用于 CDN 引入</span></span>
<span class="line"><span style="color:#babed8;">    ├─ [name].js        # 打包后的组件脚本，UMD 格式</span></span>
<span class="line"><span style="color:#babed8;">    ├─ [name].es.js     # 打包后的组件脚本，ESModule 格式</span></span>
<span class="line"><span style="color:#babed8;">    ├─ [name].min.js    # 打包和压缩后的组件脚本，UMD 格式</span></span>
<span class="line"><span style="color:#babed8;">    └─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>单个组件编译后的目录如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">button</span></span>
<span class="line"><span style="color:#babed8;">├─ index.js         # 组件编译后的 JS 文件</span></span>
<span class="line"><span style="color:#babed8;">├─ index.css        # 组件编译后的 CSS 文件</span></span>
<span class="line"><span style="color:#babed8;">├─ index.less       # 组件编译前的 CSS 文件，可以为 less 或 scss</span></span>
<span class="line"><span style="color:#babed8;">└─ style            # 按需引入样式的入口</span></span>
<span class="line"><span style="color:#babed8;">    ├─ index.js     # 按需引入编译后的样式</span></span>
<span class="line"><span style="color:#babed8;">    └─ less.js      # 按需引入未编译的样式，可用于主题定制</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h2 id="生成类型声明" tabindex="-1">生成类型声明 <a class="header-anchor" href="#生成类型声明" aria-hidden="true">#</a></h2><p>当组件库使用 TS 编写，且根目录下存在 <code>tsconfig.declaration.json</code> 文件，Vant CLI 会自动生成 <code>.d.ts</code> 类型声明文件。</p><p><code>tsconfig.declaration.json</code> 的参考格式如下：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">extends</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./tsconfig.json</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">compilerOptions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">declaration</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">declarationDir</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">emitDeclarationOnly</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">include</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">es/**/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lib/**/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">],</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">exclude</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">node_modules</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">**/test/**/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">**/demo/**/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>成功生成类型声明后，请在 <code>package.json</code> 中添加类型入口声明：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">typings</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lib/index.d.ts</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div></div></div></main><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_button_index.md\":\"aa43389d\",\"面试题_js_index.md\":\"d9022b75\",\"technology_待整理_index.md\":\"cd182cba\",\"introduce.md\":\"151f998f\",\"technology_blog_index.md\":\"b9d66824\",\"technology_typescript_index.md\":\"b32f8f74\",\"www_index.md\":\"ee942a14\",\"面试题_index.md\":\"69aa1706\",\"面试题_html_index.md\":\"01fab77b\",\"技术总结_unocss.md\":\"185c54f2\",\"每日任务_index.md\":\"8d6f93c4\",\"components_index.md\":\"c76bb41d\",\"面试题_vue_index.md\":\"172437ce\",\"面试题_待整理_index.md\":\"b7b5073a\",\"index.md\":\"2bfd6ad8\",\"技术总结_index.md\":\"3f8dbe79\",\"technology_vantcli_index.md\":\"e26eafd5\",\"vue3_index.md\":\"bfa452eb\",\"vitepress_index.md\":\"8e83926c\"}")</script>
    <script type="module" async src="/assets/app.db42a1fc.js"></script>
    
  </body>
</html>